import { Button, message, Modal, Radio, RadioChangeEvent, Space } from 'antd';
import React, { useEffect, useState } from 'react';
import { useIntl } from '@umijs/max';
import Table, { ColumnsType } from 'antd/es/table';
import { useDeleteConfirm } from '@/hooks/useAlartMolder';
import { ChangeRoomType, DELOneUserCheck, GetRoomUserMsg, UserLostCard } from '../service';
import { useDispatch } from 'react-redux';
import { decrement } from '../counter/counterSlice';
interface props {
  H5Flag: boolean;
  userMsg: any;
  handleOk: any;
}
const H5Model: React.FC<props> = ({ H5Flag, userMsg, handleOk }) => {
  console.log('userMsg', userMsg);

  const intl = useIntl();
  const columns: ColumnsType<UserData> = [
    {
      key: 'realName',
      title: intl.formatMessage({ id: 'business.Name' }),
      dataIndex: 'realName',
      filterMode: 'tree',
      filterSearch: true,
    },
    {
      key: 'roomNo',
      title: intl.formatMessage({ id: 'business.Room' }),
      render: (_, record: { subRoomNo: string; roomNo: string }) =>
        record.subRoomNo ? record.subRoomNo : record.roomNo,
    },
    {
      key: 'mobile',
      title: intl.formatMessage({ id: 'business.Mobile' }),
      dataIndex: 'mobile',
      align: 'center',
    },
    {
      key: 'cardNum',
      title: intl.formatMessage({ id: 'business.Room card' }),
      dataIndex: 'cardNum',
      align: 'center',
    },
    {
      key: 'issuingTime',
      title: intl.formatMessage({ id: 'business.Card issuance time' }),
      dataIndex: 'issuingTime',
      filterSearch: true,
      align: 'center',
    },
    {
      title: intl.formatMessage({ id: 'business.Issuing' }),
      key: 'actiontwo',
      align: 'center',
      dataIndex: 'status',
      width: 80,
      render: (_, record) => (
        <Space size="middle">
          {record.status == '1' ? (
            <a style={{ color: 'green' }}> {intl.formatMessage({ id: 'business.Success' })}</a>
          ) : record.status == '0' ? (
            <a style={{ color: '#28004D' }}>{intl.formatMessage({ id: 'business.wait' })}</a>
          ) : record.status == '7' ? (
            <a
              style={{
                color: '#708090',
              }}
            >
              {intl.formatMessage({ id: 'business.lost' })}
            </a>
          ) : (
            <a style={{ color: 'red' }}>{intl.formatMessage({ id: 'business.Return card' })}</a>
          )}
        </Space>
      ),
    },
    {
      title: intl.formatMessage({ id: 'business.Action' }),
      key: 'action',
      align: 'center',
      width: 115,
      render: (_, record) => (
        <Space size="middle">
          {record.status == '1' ? (
            // <Dropdown menu={{ items }} placement="bottom" arrow>
            <a style={{ color: 'red' }} onClick={() => LostCard(record)}>
              {intl.formatMessage({ id: 'business.Loss' })}
            </a>
          ) : // </Dropdown>
          record.status == '0' ? (
            <a
              style={{ color: 'red' }}
              onClick={() => {
                ISDELOneUserCheck(record);
              }}
            >
              {intl.formatMessage({ id: 'business.Delete' })}
            </a>
          ) : record.status == '7' ? (
            //   <Button size="small" style={{ fontSize: "12px" }} onClick={(() => {
            //     ReplacementCard(record)

            //   })}>{intl.formatMessage({ id: "business.mend card" })}</Button>
            <>请在pc端补卡</>
          ) : (
            <a style={{ color: 'red' }}></a>
          )}
        </Space>
      ),
    },
  ];

  useEffect(() => {
    getusermsg();
  }, []);

  const [userList, setUserList] = useState<UserData[]>([]);
  const dispatch = useDispatch();
  const getusermsg = async () => {
    dispatch(decrement());

    let { data } = await GetRoomUserMsg(userMsg.roomId);
    if (data.list) {
      setUserList(data.list);
    }
    // 点击进入 选中还未退卡的第一条记录
  };

  const ISDELOneUserCheck = async (data: { UUID: string; id: string }) => {
    if (data.UUID) {
      let list = userList.filter((item) => {
        return item.UUID != data.UUID;
      });
      setUserList(list);
    } else {
      let result = await DELOneUserCheck(data.id);
      if (result.code == 0) {
        getusermsg();
        if (!userList.length) {
          setUserList([]);
        }
      }
    }
  };
  const LostCard = (data: { realName: string; roomId: string }) => {
    useDeleteConfirm(intl.formatMessage({ id: 'business.Room Card Loss' }, { Guest: data.realName }), '', async (res) => {
      if (res == true) {
        let result = await UserLostCard(data.roomId);
        if (result.code == 0) {
          message.success(intl.formatMessage({ id: 'Loss Success' }));
          getusermsg();
        }
      }
    });
  };
  const [value, setValue] = useState();
  const onChange = (e: RadioChangeEvent) => {
    setValue(e.target.value);
  };

  const directives = async () => {
    if (userMsg.status == 1 && parseInt(value) + 1 == 3) {
      return message.error(
        intl.formatMessage({ id: 'business.clean house cannot be turned into a house' }),
      );
    }
    ChangeRoomType({
      room_id: userMsg.roomId,
      status: parseInt(value) + 1,
    });
    handleOk();
    message.success(intl.formatMessage({ id: 'business.Room status updated successfully' }));
  };
  const modalTitle = (
    <>
      <div className="titleBoder">
        {intl.formatMessage({ id: 'business.Room type' })} :{' '}
        <span>
          {userMsg.roomName} -{' '}
          {userMsg.status == 1
            ? intl.formatMessage({ id: 'business.Clean room' })
            : userMsg.status == 2
              ? intl.formatMessage({ id: 'business.Messy room' })
              : userMsg.status == 3
                ? intl.formatMessage({ id: 'business.Checking room' })
                : userMsg.status == 4
                  ? intl.formatMessage({ id: 'business.Repair room' })
                  : intl.formatMessage({ id: 'business.Expired' })}
        </span>
        <span> &emsp;&emsp;&emsp;&emsp;&emsp;&nbsp; </span>
        <div className="PXboder"></div> {/*0.5px的线*/}
      </div>
    </>
  );


  const OPtion = (
    <>
    
          <div style={{ marginTop: '20px' }}>
            {intl.formatMessage({ id: 'business.Room settings' })}
            <p></p>
            <Radio.Group onChange={onChange} value={value}>
              <Radio disabled={userMsg.status == 1} value={'0'}>
                {intl.formatMessage({ id: 'business.Clean room' })}
              </Radio>
              <Radio disabled={userMsg.status == 2} value={'1'}>
                {intl.formatMessage({ id: 'business.Messy room' })}
              </Radio>
              <Radio disabled={userMsg.status == 3} value={'2'}>
                {intl.formatMessage({ id: 'business.Checking room' })}
              </Radio>
              <Radio disabled={userMsg.status == 4} value={'3'}>
                {intl.formatMessage({ id: 'business.Repair room' })}
              </Radio>
            </Radio.Group>
          </div>

          <p></p>
          <div style={{marginLeft:"70vw"}}>
            <Button type="primary" onClick={() => directives()}>
              {intl.formatMessage({ id: 'business.Action' })}
            </Button>
          </div>
    
    </>
  )


  return (
    <Modal
      centered={true}
      title={modalTitle}
      open={H5Flag}
      onOk={handleOk}
      onCancel={handleOk}
      footer={null}
    >
      {userMsg.status == 9 || userMsg.status == 3 ? (
        <>
          <Table
            className="menustyle"
            columns={columns}
            dataSource={userList.map((item: UserData, index) => ({
              ...item,
              key: index,
            }))}
            pagination={false}
          />
            {OPtion}
        </>
      ) : (
        <>
         {OPtion}
        </>
      )}
    </Modal>
  );
};

export default H5Model;
